<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Video Streaming</title>
</head>

<body>
    <img id="videoStream" style="width: 100%">

    <script>
        var randomNumber = Math.floor(Math.random() * 10);
        const socket = new WebSocket("ws://192.168.64.221:8082/img/" + randomNumber);

        socket.binaryType = 'arraybuffer';
        socket.onmessage = function (event){
            const imgElement = document.getElementById('videoStream');
            const blob = new Blob([event.data]);
            imgElement.src = URL.createObjectURL(blob);
        };
    </script>
</body>
</html>